import { onMounted, nextTick, ref, App, shallowRef, onBeforeUnmount } from "vue";

import { v4 as uuidv4 } from "uuid";
import { Page } from "@/components/page-box";

/**
 * 初始化页面框架组件
 * @param PageContext
 * @returns
 */
export const initPageComponent = (PageContext: { new (): Page }) => {
	const pageContainerId = ref(uuidv4());
	const vm = shallowRef<App<Element>>();
	let page: any;
	onMounted(async () => {
		page = new PageContext();
		await nextTick();
		const container = document.getElementById(pageContainerId.value);
		if (container) {
			vm.value = page.createComponent(container);
		}
	});
	onBeforeUnmount(() => {
		page.unMount();
	});
	return {
		pageContainerId,
	};
};
